<template>
	<view class="page" :style="{ paddingTop: winInfo.height + 20 + 'px' }">
		<view class="header-box" :style="{ height: winInfo.height + 'px', paddingTop: winInfo.top + 'px' }">
			<view class="header-info">
				<tui-icon name="arrowleft" size="25" @tap="goBack" color="#000" bold="true"></tui-icon>
				<view class="header-name">MBTI问卷</view>
			</view>
		</view>

		<view class="main-content">
			<view class="question-section" v-for="(question, index) in DataList" :key="question.ID">
				<view class="question-title">
					{{ question.Wenti }}
				</view>
				<view class="options-container">
					<view
						class="option-item"
						v-for="option in question.options"
						:key="option.Id"
						:class="{ 'option-selected': question.selectedItemId === option.Id }"
						@tap="selectOption(index, option.Id)"
					>
						{{ option.Daan }}
					</view>
				</view>
			</view>
		</view>
		<view @tap="submitQuestionnaire" class="submit-btn">提交</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			Islogin: this.Microi.IsLogin(),
			CurrentUser: this.Microi.GetCurrentUser(),
			winInfo: {
				height: 64, //header高度
				top: 26, //标题图标距离顶部距离
				scrollH: 0 //滚动总高度
			},
			DataList: [],
			startTime: 0,
			options: {},
			IsDisabled: false
		};
	},
	mounted() {
		let obj = {};
		// #ifdef MP-WEIXIN
		obj = wx.getMenuButtonBoundingClientRect();
		// #endif
		// #ifdef MP-BAIDU
		obj = swan.getMenuButtonBoundingClientRect();
		// #endif
		// #ifdef MP-ALIPAY
		my.hideAddToDesktopMenu();
		// #endif

		setTimeout(() => {
			uni.getSystemInfo({
				success: (res) => {
					this.winInfo = res;
					this.winInfo.width = obj.left || res.windowWidth;
					this.winInfo.height = obj.top ? obj.top + obj.height + 8 : res.statusBarHeight + 44;
					this.winInfo.top = obj.top ? obj.top + (obj.height - 32) / 2 : res.statusBarHeight + 6;
					this.winInfo.scrollH = res.windowWidth;
				}
			});
		}, 0);
	},

	onLoad(options) {
		this.options = options;
		this.getQuestionList();
	},
	onShow() {
		this.startTime = new Date();
	},
	onHide() {
		if (this.Islogin) {
			// 获取当前页面栈
			const pages = getCurrentPages();
			// 获取当前页面的对象
			const currentPage = pages[pages.length - 1];
			// 获取当前页面的路径
			const route = currentPage.route;
			// 获取当前页面的参数
			const options = currentPage.options;
			this.Microi.ApiEngine.Run('Add_liulanLog', {
				YemianCS: options,
				YemianDZ: route,
				LiulanSJC: new Date().getTime() - this.startTime.getTime()
			});
		}
	},
	onUnload() {
		if (this.Islogin) {
			// 获取当前页面栈
			const pages = getCurrentPages();
			// 获取当前页面的对象
			const currentPage = pages[pages.length - 1];
			// 获取当前页面的路径
			const route = currentPage.route;
			// 获取当前页面的参数
			const options = currentPage.options;
			this.Microi.ApiEngine.Run('Add_liulanLog', {
				YemianCS: options,
				YemianDZ: route,
				LiulanSJC: new Date().getTime() - this.startTime.getTime()
			});
		}
	},
	methods: {
		async getQuestionList() {
			var self = this;
			var res = await self.Microi.ApiEngine.Run('get_questionList', {
				TimuLY: 'MBTI',
				YonghuID :this.options.Id
			});
			this.DataList = res.Data;
		},
		selectOption(questionIndex, optionId) {
			this.$set(this.DataList[questionIndex], 'selectedItemId', optionId);
			console.log(this.DataList);
		},
		async submitQuestionnaire() {
			var self = this;
			if (this.IsDisabled) {
				this.Microi.Tips('请勿重复提交', false);
				return;
			}
			this.IsDisabled = true;
			var flag = false;
			var index = this.DataList.findIndex((val) => {
				return !val.selectedItemId || val.selectedItemId === null || val.selectedItemId === '';
			});
			if (index != -1) {
				this.Microi.Tips('请检查是否选择完整', false);
				this.IsDisabled = false;
				return;
			}
			var res = await self.Microi.ApiEngine.Run('add_MBTI_Answer', {
				Answer: this.DataList,
				YonghuID: this.options.Id
			});
			this.Microi.Tips(res.Msg, false);
			setTimeout(function () {
				uni.reLaunch({
					url: '/pages/my/myDetail/myDetail?Id=' + self.options.Id
				});
			}, 1500);
			this.IsDisabled = false;
		},
		goBack() {
			let pages = getCurrentPages(); // 获取当前页面堆栈
			let pageCount = pages.length; // 页面堆栈中的页面数量
			// 判断是否有上级页面
			if (pageCount > 1) {
				// 如果有上级页面，则返回上级页面
				uni.navigateBack({
					delta: 1
				});
			} else {
				// 如果没有上级页面，则返回首页
				uni.switchTab({
					url: '/pages/tabbar/find/find' // 替换为你的首页路径
				});
			}
		}
	}
};
</script>

<style>
.page {
	padding: 0 20rpx;
}
page {
	background-color: #fff;

	color: #000;
	box-sizing: border-box;
}

.header-box {
	width: 100%;
	position: fixed;
	left: 0;
	top: 0;
	z-index: 999;
	background-color: #fff;
	display: flex;
	align-items: center;
	justify-content: space-between;
	box-sizing: border-box;
	height: 400rpx;
}
.header-name {
	font-family: PingFang SC, PingFang SC;
	font-weight: 800;
	font-size: 36rpx;
	color: #181818;
	text-align: center;
	font-style: normal;
	text-transform: none;
}
.header-info {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 20rpx;
}
.header-info image {
	width: 25rpx;
}
.header-btn {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 20rpx;
}
.header-btn image {
	width: 44rpx;
	height: 44rpx;
}
.hearder-container {
	padding: 20rpx 0;
	border-bottom: 2rpx solid #f4f5f6;
}

.no-Data {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	font-size: 25rpx;
	color: #999999;
	margin: auto;
	margin-top: 200rpx;
}
.no-Data image {
	width: 400rpx;
}

.main-content {
	box-sizing: border-box;
}

.question-section {
	margin-bottom: 40rpx;
}

.question-title {
	font-family: PingFang SC, PingFang SC;
	font-weight: 500;
	font-size: 30rpx;
	color: #000;
	margin-bottom: 20rpx;
}

.options-container {
	display: flex;
	flex-direction: column;
	gap: 20rpx;
}

.option-item {
	padding: 30rpx 20rpx;
	background-color: #f4f5f6;
	border-radius: 30rpx;
	font-size: 28rpx;
	color: #333;
	text-align: center;
	box-sizing: border-box;
}

.option-selected {
	background-color: #5677fc;
	color: #fff;
}

.submit-btn {
	width: 90%;
	margin: auto;
	margin-top: 50rpx;
	height: 80rpx;
	line-height: 80rpx;
	border-radius: 60rpx;

	background-color: #5677fc;

	font-family: PingFang SC, PingFang SC;
	font-weight: 800;
	font-size: 36rpx;
	color: #fff;
	text-align: center;
	font-style: normal;
	text-transform: none;
}
</style>
